<!DOCTYPE HTML>
<html>

<head>
	<title>Welcome to your ExpressLRS System</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="stylesheet" href="mui.css" />
	<link rel="stylesheet" href="elrs.css" />
</head>

<body>
	<header class="mui-appbar mui--z1 mui--text-center elrs-header">
		<img src="logo.svg" height="250" width="250" style="padding:20px;">
		<h1><b>ExpressLRS</b></h1>
		<span id="product_name">VRx Backpack</span><br/>
		<b>Firmware Rev. </b>@VERSION@ <span id="reg_domain"></span>
	</header>

	<br/>
	<div class="mui-container-fluid">
		<div class="mui-panel mui-col-sm-10 mui-col-sm-offset-1">

			<ul class="mui-tabs__bar mui-tabs__bar--justified">
				<li class="mui--is-active"><a data-mui-toggle="tab" data-mui-controls="pane-justified-1">Update</a></li>
				<li><a data-mui-toggle="tab" data-mui-controls="pane-justified-2">Network</a></li>
				<li id="rtctab" style="display:none;"><a data-mui-toggle="tab" data-mui-controls="pane-justified-3">RTC Time</a></li>
				<li id="aattab" style="display:none;"><a data-mui-toggle="tab" data-mui-controls="pane-justified-4">Antenna Tracking</a></li>
			</ul>

			<div class="mui-tabs__pane mui--is-active" id="pane-justified-1">
				<h2>Backpack Firmware Update</h2>
				Here you can update your backpack firmware,
				be careful to upload the correct file otherwise a bad flash may occur. If this happens you will need
				to reflash via USB/Serial.
				<br/>
				<br/>
				<form id='upload_form_bp' method='POST' enctype='multipart/form-data'>
					<div class="group">
						<input id='firmware_file_bp' type='file' name='update'>
						<input type='submit' value='Update' class='mui-btn mui-btn--primary'>
					</div>
					<br/>
					<h3 id="status_bp"></h3>
					<progress id="progressBar_bp" value="0" max="100" style="width:100%;"></progress>
				</form>
			</div>

			<div class="mui-tabs__pane" id="pane-justified-2">
				<div id="apmode" style="display:none;">
					<div class="mui-panel">
						<h2>Join Network</h2>
						Here you can join a network and it will be saved as your &quot;home&quot; network.
						When you are in range of your &quot;home&quot; network and start WiFi update the TX Module will automatically connect.
						<form action="/sethome" id="sethome" method="POST" autocomplete="off" class="mui-form">
							<div class="autocomplete mui-textfield" style="width: 80%;">
								<input id="network" type="text" name="network" placeholder="SSID"/>
							</div>
							<div id="loader" style="float:right" class="loader"></div>
							<div class="mui-textfield" style="width: 80%;">
								<input type="password" id="password" name="password" placeholder="Password" />
							</div>
							<input type="submit" value="Join" class="mui-btn mui-btn--primary">
						</form>
					</div>
					<div class="mui-panel">
						<a id="connect" href="#">Connect to &quot;home&quot; network: <span id="homenet"></span></a>
					</div>
				</div>

				<div id="stamode" style="display:none;">
					<h2>Home Network: <span id="ssid"></span></h2>
					<br>
					Forget &quot;home&quot; network and start access point
					<br>
					<a id="forget" href="#" class="mui-btn mui-btn--primary">Forget</a>
					<br><br>
					Disconnect from &quot;home&quot; network start access point
					<br>
					<a id="access" href="#" class="mui-btn mui-btn--primary">Disconnect</a>
				</div>
			</div>

			<div class="mui-tabs__pane" id="pane-justified-3">
				<div class="mui-panel">
					<h2>RTC Update via NTP</h2>
					Here you can update your goggle RTC clock time using any available NTP server.
					Make sure that the home network you're connected to has access to the Internet in order to connect to the NTP server.
					<form action="/setrtc" id="setrtc" method="POST" class="mui-form">
						<div class="mui-textfield" style="width: 50%;">
							<input id="server" type="text" name="server" value="pool.ntp.org"/>
						</div>
						<div class="mui-textfield" style="width: 50%;">
							<input id="offset" type="number" name="offset" min="-12" max="12" placeholder="UTC Offset"/>
						</div>
						<div class="mui-checkbox">
							<label>
								<input id="dst" type="checkbox" name="dst" checked>
								Daylight Saving
							</label>
						</div>
						<input type="submit" value="Set Time" class="mui-btn mui-btn--primary">
					</form>
				</div>
			</div>

			<div class="mui-tabs__pane" id="pane-justified-4">
				<form action="/aatconfig" id="aatconfig" method="POST" class="mui-form">
					<div class="mui-panel">
						<fieldset><legend>Servo maximum speed</legend>
							Use the slider to set a limit on the servo's maximum rotational speed. Note that when the azimuth servo
							needs to flip from one side to the other, it may move at full speed if the 'Fast Flip' option is enabled.
							<input type="range" id="servosmoo" name="servosmoo" list="servosmoo_markers" value="5" min="0" max="9" step="1" style="width: 100%;"/>
							<datalist id="servosmoo_markers">
								<option value="0" label="Fast" title="Lickedy Speed"></option>
								<option value="1" label=""></option>
								<option value="2" label=""></option>
								<option value="3" label=""></option>
								<option value="4" label=""></option>
								<option value="5" label="90deg/s"></option>
								<option value="6" label=""></option>
								<option value="7" label=""></option>
								<option value="8" label=""></option>
								<option value="9" label="Slow"></option>
							</datalist>
						</fieldset>
					</div>
					<div class="mui-panel">
						<fieldset><legend>Servo mode</legend>
							<div>Set the mechanical servo mode to match the tracker's design.</div>
							<div class="mui-select mui-col-xs-12">
								<select id="servomode" name="servomode">
									<option value="0">2:1 geared - Servo geared for 360 degree movement</option>
									<option value="1">Clip 180 - Standard direct driven servo limited to 180 degrees</option>
								</select>
							</div>
						</fieldset>
					</div>
					<div class="mui-panel">
						<fieldset><legend>Azimuth servo</legend>
							Enter the microsecond (us) values for the min and max position of the horizontal servo, using the slider to test positions.
							<input type="range" id="bear" name="bear" class="aatlive" list="azim_markers" value="0" min="-180" max="180" step="45" style="width: 100%;"/>
							<datalist id="bear_markers">
								<option value="-180"></option>
								<option value="-90"></option>
								<option value="0"></option>
								<option value="90"></option>
								<option value="180"></option>
							</datalist>
							<div class="mui-textfield mui-col-xs-3">
								<input id="azim_min" type="number" name="azim_min" min="500" max="2500"/>
								<label for="azim_min">Min</label>
							</div>
							<div class="mui-select mui-col-xs-6">
								<select id="azim_center" name="azim_center">
									<option value="0">N</option>
									<option value="2">E</option>
									<option value="4">S</option>
									<option value="6">W</option>
								</select>
								<label for="azim_center">Servo center direction</label>
							</div>
							<div class="mui-textfield mui-col-xs-3">
								<input id="azim_max" type="number" name="azim_max" min="500" max="2500"/>
								<label for="azim_max">Max</label>
							</div>
							<div class="mui-checkbox mui-col-xs-12">
								<label>
									<input id="azim_sff" type="checkbox" name="azim_sff" value="1">
									Fast Flip (If the azimuth servo needs to move more than 80% of the distance, jump immediately)
								</label>
							</div>
						</fieldset>
						<fieldset><legend>Elevation servo</legend>
							Enter the microsecond (us) values for the min and max position of the vertical servo, using the slider to test positions.
							<input type="range" id="elev" name="elev" class="aatlive" list="elev_markers" value="45" min="0" max="90" step="15" style="width: 100%;"/>
							<datalist id="elev_markers">
								<option value="0" label="0"></option>
								<option value="15" label=""></option>
								<option value="30" label=""></option>
								<option value="45" label="45"></option>
								<option value="60" label=""></option>
								<option value="75" label=""></option>
								<option value="90" label="90"></option>
							</datalist>
							<div class="mui-textfield mui-col-xs-3">
								<input id="elev_min" type="number" name="elev_min" min="500" max="2500"/>
								<label for="elev_min">Min</label>
							</div>
							<div class="mui-textfield mui-col-xs-6 mui--text-center">
								&nbsp;
							</div>
							<div class="mui-textfield mui-col-xs-3">
								<input id="elev_max" type="number" name="elev_max" min="500" max="2500"/>
								<label for="elev_max">Max</label>
							</div>
						</fieldset>
					</div>
					<div class="mui-panel">
						<fieldset><legend>Battery voltage</legend>
							<div>Battery voltage is calculated using the formula <strong>VBAT = (ADC - offset) / scale</strong>. If voltage is reading too high, increase scale.</div>
							<div class="mui-textfield mui-col-xs-6">
								<input id="vbat_scale" type="number" name="vbat_scale" min="1" max="1000"/>
								<label for="vbat_scale">Scale</label>
							</div>
							<div class="mui-textfield mui-col-xs-6">
								<input id="vbat_offset" type="number" name="vbat_offset" min="-1000" max="1000"/>
								<label for="vbat_offset">Offset</label>
							</div>
						</fieldset>
					</div>
					<div class="mui-panel">
						<fieldset>
							<legend>Home position settings</legend>
							Define the minimum number of satellites required to establish the home position.
							<input type="range" id="satmin" name="satmin" list="satmin_markers" min="5" max="21" step="2"
								style="width: 100%;" />
							<datalist id="satmin_markers">
								<option value="5" label="5" title="Less precise"></option>
								<option value="7" label="7"></option>
								<option value="9" label="9"></option>
								<option value="11" label="11"></option>
								<option value="13" label="13"></option>
								<option value="15" label="15"></option>
								<option value="17" label="17"></option>
								<option value="19" label="19"></option>
								<option value="21" label="21" title="More precise"></option>
							</datalist>
						</fieldset>
					</div>
					<input type="hidden" name="commit" value="1"/>
					<input type="submit" id="aatsubmit" value="Save" class="mui-btn mui-btn--primary"/>
					</form>
				</div>
			</div>
		</div>
	</div>
	<footer>
		<div class="mui-container-fluid">
			<div class="mui-row">
				<div class="mui--text-center mui-col-xs-4">
					<a href="https://github.com/ExpressLRS/Backpack">
						<svg width="24" xmlns="http://www.w3.org/2000/svg" aria-label="GitHub" role="img" viewBox="0 0 512 512">
							<rect width="512" height="512" rx="15%" fill="#181717"/>
							<path fill="#fff" d="M335 499c14 0 12 17 12 17H165s-2-17 12-17c13 0 16-6 16-12l-1-44c-71 16-86-34-86-34-12-30-28-37-28-37-24-16 1-16 1-16 26 2 40 26 40 26 22 39 59 28 74 22 2-17 9-28 16-35-57-6-116-28-116-126 0-28 10-51 26-69-3-6-11-32 3-67 0 0 21-7 70 26 42-12 86-12 128 0 49-33 70-26 70-26 14 35 6 61 3 67 16 18 26 41 26 69 0 98-60 120-117 126 10 8 18 24 18 48l-1 70c0 6 3 12 16 12z"/>
						</svg>
						GitHub
					</a>
				</div>
				<div class="mui--text-center mui-col-xs-4">
					<a href="https://discord.gg/dS6ReFY">
						<svg width="24" fill="#5865f2" aria-label="Discord" role="img" version="1.1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
							<rect width="512" height="512" rx="15%" fill="#fff"/>
							<path d="m386 137c-24-11-49.5-19-76.3-23.7c-.5 0-1 0-1.2.6c-3.3 5.9-7 13.5-9.5 19.5c-29-4.3-57.5-4.3-85.7 0c-2.6-6.2-6.3-13.7-10-19.5c-.3-.4-.7-.7-1.2-.6c-23 4.6-52.4 13-76 23.7c-.2 0-.4.2-.5.4c-49 73-62 143-55 213c0 .3.2.7.5 1c32 23.6 63 38 93.6 47.3c.5 0 1 0 1.3-.4c7.2-9.8 13.6-20.2 19.2-31.2c.3-.6 0-1.4-.7-1.6c-10-4-20-8.6-29.3-14c-.7-.4-.8-1.5 0-2c2-1.5 4-3 5.8-4.5c.3-.3.8-.3 1.2-.2c61.4 28 128 28 188 0c.4-.2.9-.1 1.2.1c1.9 1.6 3.8 3.1 5.8 4.6c.7.5.6 1.6 0 2c-9.3 5.5-19 10-29.3 14c-.7.3-1 1-.6 1.7c5.6 11 12.1 21.3 19 31c.3.4.8.6 1.3.4c30.6-9.5 61.7-23.8 93.8-47.3c.3-.2.5-.5.5-1c7.8-80.9-13.1-151-55.4-213c0-.2-.3-.4-.5-.4Zm-192 171c-19 0-34-17-34-38c0-21 15-38 34-38c19 0 34 17 34 38c0 21-15 38-34 38zm125 0c-19 0-34-17-34-38c0-21 15-38 34-38c19 0 34 17 34 38c0 21-15 38-34 38z" fill="#5865f2"/>
						</svg>
						Discord
					</a>
				</div>
				<div class="mui--text-center mui-col-xs-4">
					<a href="https://www.facebook.com/groups/636441730280366">
						<svg width="24" xmlns="http://www.w3.org/2000/svg" aria-label="Facebook" role="img" viewBox="0 0 512 512">
							<rect width="512" height="512" rx="15%" fill="#1877f2"/>
							<path d="M355.6 330l11.4-74h-71v-48c0-20.2 9.9-40 41.7-40H370v-63s-29.3-5-57.3-5c-58.5 0-96.7 35.4-96.7 99.6V256h-65v74h65v182h80V330h59.6z" fill="#fff"/>
						</svg>
						Facebook
					</a>
				</div>
			</div>
		</div>
	</footer>
</body>
<script src="mui.js"></script>
<script src="scan.js"></script>
</html>
